<template>
  <div class="page">
    <swiper
      class="swiper-box"
      indicator-dots
      indicator-color="#000"
      indicator-active-color="#fff"
      autoplay
      :interval="4000"
      :duration="900"
      circular>
      <swiper-item v-for="(item, index) in swiperImgList" :key="index">
        <navigator v-if="item.link" :url="item.link" class="slide-link">
          <image :src="item.img" mode="aspectFit" class="slide-image"/>
        </navigator>
        <image :src="item.img" mode="aspectFit" class="slide-image"/>
      </swiper-item>
    </swiper>
    <div class="weui-grids">
      <block v-for="(item, index) in grids" :key="index">
        <navigator :url="item.link" class="weui-grid" hover-class="weui-grid_active">
          <image class="weui-grid__icon" :src="item.icon" />
          <div class="weui-grid__label">{{item.name}}</div>
        </navigator>
      </block>
    </div>
  </div>
</template>
<script>
import getHomeBanner from '@/interface/picture/getHomeBanner'
export default {
  data () {
    const introduce = '/pages/introduce/main'
    return {
      swiperImgList: [
        { img: require('./images/banner-1.png'), link: `${introduce}?type=hourWorker` }
      ],
      grids: [
        { icon: require('./images/hour-worker.png'), name: '小时工', link: `${introduce}?type=hourWorker` },
        { icon: require('./images/parenting.png'), name: '育儿嫂', link: `${introduce}?type=parenting` },
        { icon: require('./images/matron.png'), name: '月嫂服务', link: `${introduce}?type=matron` },
        { icon: require('./images/puerpera.png'), name: '产妇服务', link: '/pages/puerpera/main' },
        { icon: require('./images/baby-sitter.png'), name: '保姆', link: `${introduce}?type=babySitter` },
        { icon: require('./images/assart.png'), name: '开荒', link: `${introduce}?type=assart` }
      ]
    }
  },
  methods: {

  },
  mounted () {
    getHomeBanner().then(list => {
      this.swiperImgList = [this.swiperImgList[0], ...list]
    })
  }
}
</script>
<style>
.swiper-box {
  height: 870upx;
}
.slide-image,
.slide-link {
  width: 100%;
  height: 100%;
}
.weui-grid {
  background-color: #fafaff;
  height: 182upx;
  border-right: none;
  border-bottom: none;
}
.weui-grid:nth-child(2n) {
  background-color: #f3f3f8;
}
.wx-swiper-dots {
  position: relative;
  left: unset !important;
  right: 0;
}
.wx-swiper-dots.wx-swiper-dots-horizontal {
  margin-bottom: 106upx;
}

</style>